<template>
  <Detail-dialog
    modal
    width="35"
    :title="title"
    confirmButtonText="确定"
    :show.sync="dialogShow" @close="close" @save="changeLogin">
            <div class="box">
                      <div  v-for="(item,index) in positionInfoList"  :key="index">

                        <el-radio class="box-item"  :label="item.positionCode" v-model="selectPositionCode"  border  >
                           <el-badge v-if="index===0" type="warning " value="主职位">
                             <span> {{item.positionName}}({{item.departmentName}})</span>
                          </el-badge>
                             <span v-else> {{item.positionName}}({{item.departmentName}})</span>
                        </el-radio>
                   </div>
            </div>
  </Detail-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import {debounce} from 'throttle-debounce'
import DetailDialog from '@/components/DetailDialog'
import SelectDepart from '@/views/system/components/department/select'
import employee from '@/api/system/employeeAPI'
export default {
  props: {
    visible: Boolean,
    title: String
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created () {
    this.debouncedChangeLogin = debounce(300, this.changeLogin)
  },
  components: {DetailDialog, SelectDepart},
  watch: {
    visible: {
      handler (val) {
        this.dialogShow = val
        this.selectPositionCode = this.userInfo.loginPosition
        this.getEmployeePosition(this.userInfo.userId)
      },
      immediate: true
    },
    dialogShow (val) {
      this.$emit('update:visible', val)
    }
  },
  data () {
    return {
      dialogShow: false,
      selectPositionCode: '',
      positionInfoList: []
    }
  },
  methods: {
    close () {
      this.dialogShow = false
    },
    getEmployeePosition (employeeCode) {
      employee.getEmployeePositionAPI({employeeCode}).then(res => {
        this.positionInfoList = res.data || []
      })
    },
    changeLogin () {
      if (!this.userInfo || !this.userInfo.account) {
        this.$msgBox.error('当前账号不存在')
        return
      }
      if (!this.selectPositionCode || this.selectPositionCode === null) {
        this.$msgBox.error('请选择职位')
        return
      }
      if (this.selectPositionCode === this.userInfo.loginPosition) {
        this.$msgBox.error('当前职位已经登录了')
        return
      }
      const params = {}
      params.positionCode = this.selectPositionCode
      params.account = this.userInfo.account
      this.$store.dispatch('user/ChangeLogin', params).then(res => {
        const router = { path: '/' }
        this.$router.push(router).then(() => {
          // this.$router.go(0)
        })
      })
    },
    save () {
    }
  }
}
</script>

<style lang="scss" scoped>
.box{
    display: flex;
    overflow: auto;
    padding: 0 10px;
    flex-flow: wrap;
    flex-direction: row;
    align-items:center;
    .box-item{
         margin:10px 10px;
        }

}
>>>.el-badge__content.is-fixed{
  top:-10px
}
</style>
